<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>营销管理</el-breadcrumb-item>
                <el-breadcrumb-item>广告位置</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="positionFormData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="positionFormData.positionName" placeholder="请输入广告位置名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="initPositionTable">查询</el-button>
                    <el-button type="primary" @click="addPosition">添加</el-button>
                </el-form-item>
            </el-form>
            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类型"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="positionName"
                            label="广告位置名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="descrition"
                            label="说明">
                    </el-table-column>
                    <el-table-column
                            prop="maxCount"
                            label="数量"
                            width="60">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" circle @click="changeTable(scope.row.id)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)">删除</el-button>
                            <!--<el-button type="warning" icon="el-icon-menu" circle @click="showRoleMenu(scope.row.roleId)"></el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
                <!--新增弹窗-->
                <el-dialog
                        title="提示"
                        :visible.sync="addDialogVisible"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="addForm" :rules="rules" ref="addForm">
                        <el-form-item label="类型" prop="type">
                            <el-input v-model="addForm.type"></el-input>
                        </el-form-item>
                        <el-form-item label="位置名称" prop="positionName">
                            <el-input v-model="addForm.positionName"></el-input>
                        </el-form-item>
                        <el-form-item label="说明" prop="descrition">
                            <el-input v-model="addForm.descrition"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="maxCount">
                            <el-input v-model="addForm.maxCount"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addbyPositonId('addForm')">确 定</el-button>
                    </span>
                </el-dialog>
                <!--修改弹窗-->
                <el-dialog
                        title="提示"
                        :visible.sync="changeDialogVisible"
                        width="30%"
                >
                    <!--model:表单数据-->
                    <el-form  label-width="80px" :model="changeForm" :rules="rules" ref="changeForm">
                        <el-form-item label="类型" prop="type">
                            <el-input v-model="changeForm.type"></el-input>
                        </el-form-item>
                        <el-form-item label="位置名称" prop="positionName">
                            <el-input v-model="changeForm.positionName"></el-input>
                        </el-form-item>
                        <el-form-item label="说明" prop="descrition">
                            <el-input v-model="changeForm.descrition"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="maxCount">
                            <el-input v-model="changeForm.maxCount"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="changeDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="changebyQuestionId(`changeForm`)">确 定</el-button>
                    </span>
                </el-dialog>
                <!--删除确认弹窗-->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <span>是否确认删除</span>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="delPosition()">确 定</el-button>
                </span>
                </el-dialog>

            </template>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Role",
        data(){
            return {
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                positionFormData:{},
                //新增弹窗
                addDialogVisible:false,
                addForm:{
                    positionName:'',
                    type:'',
                    descrition:'',
                    maxCount:'',
                },
                //修改弹窗
                changeDialogVisible:false,
                changeForm:[],

                //声明当前的角色id号
                delid: 0,
                //删除确认弹窗
                dialogVisible:false,
                //校验
                rules:{
                    type: [
                        { required: true, message: '请输入类型', trigger: 'blur' },
                    ],
                    positionName: [
                        { min: 2, max: 9, message: '长度在 2 到 9 个字符', trigger: 'blur' },
                        { required: true, message: '请输入位置名称', trigger: 'blur' }
                    ],
                    descrition: [
                        { required: true, message: '请输入说明', trigger: 'blur' }
                    ],
                    maxCount: [
                        { required: true, message: '请输入数量', trigger: 'blur' },
                        {pattern:/^[1-9]\d*$/,message:'请输入正整数',trigger:'blur'},
                        { min: 1, max: 2, message: '长度在 1 到 2 个字符', trigger: 'blur' },
                    ]
                },
            }
        },
        created() {
            this.initPositionTable();
        },
        methods:{
            initPositionTable(){
                var that= this;
                this.$http.post(`/market/position/initPositionTable/${this.currentPage}/${this.pageSize}`,this.positionFormData).then(function (r) {
                    that.tableData=r.data.result.records;
                    that.total=r.data.result.total;
                })
            },
            //新增
            addPosition(){
                var that=this;
                that.addDialogVisible=true;
                that.addForm={};
            },
            //确认新增
            addbyPositonId(formName){
                var that=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(`/market/position/addbyPositonId`,this.addForm).then(function (resp) {
                            that.addDialogVisible=false;
                            that.initPositionTable();
                            that.$message.success(resp.data.result);
                        })
                    } else {
                        return false;
                    }
                });
            },
            //编辑
            changeTable(id){
                var that=this;
                that.changeDialogVisible=true;
                this.$http.get("/market/position/chaXun?id="+id).then(function (resp) {
                    that.changeForm=resp.data.result.positions[0];
                })
            },
            //确认编辑
            changebyQuestionId(formName){
                var that=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(`/market/position/changePosition`,this.changeForm).then(function (resp) {
                            that.changeDialogVisible=false;
                            that.initPositionTable();
                            that.$message.success(resp.data.result);
                        })
                    }else {
                        return false;
                    }
                });

            },

            //删除
            del(id){
                var that=this;
                that.delid=id;
                that.dialogVisible=true;
            },
            //确认删除
            delPosition(){
                var that=this;
                this.$http.delete("/market/position/delPosition?id="+this.delid).then(function (resp) {
                    that.dialogVisible=false;
                    that.initPositionTable();
                    that.$message({
                        message: '删除成功！！！',
                        type: 'success'
                    });
                })
            },
            handleSizeChange(v){
                this.pageSize=v;
                this.initRoleTable();
            },
            handleCurrentChange(v){
                this.currentPage=v;
                this.initRoleTable();
            }
        }
    }
</script>

<style scoped>

</style>